<template>
  <v-container>
    <v-row>
      <v-col cols="12">
        <v-card>
          <v-card-title class="text-h5 d-flex align-center">
            <v-icon start color="primary">mdi-shield-account</v-icon>
            管理员控制台
          </v-card-title>
          <v-card-text>
            <v-row>
              <v-col cols="12" md="3">
                <v-card color="primary" dark>
                  <v-card-text class="text-center">
                    <v-icon size="48">mdi-calendar-multiple</v-icon>
                    <div class="text-h4 mt-2">{{ stats.meetingCount }}</div>
                    <div class="text-body-2">会议总数</div>
                  </v-card-text>
                </v-card>
              </v-col>
              <v-col cols="12" md="3">
                <v-card color="success" dark>
                  <v-card-text class="text-center">
                    <v-icon size="48">mdi-account-group</v-icon>
                    <div class="text-h4 mt-2">{{ stats.userCount }}</div>
                    <div class="text-body-2">用户总数</div>
                  </v-card-text>
                </v-card>
              </v-col>
              <v-col cols="12" md="3">
                <v-card color="info" dark>
                  <v-card-text class="text-center">
                    <v-icon size="48">mdi-office-building</v-icon>
                    <div class="text-h4 mt-2">{{ stats.roomCount }}</div>
                    <div class="text-body-2">会议室总数</div>
                  </v-card-text>
                </v-card>
              </v-col>
              <v-col cols="12" md="3">
                <v-card color="warning" dark>
                  <v-card-text class="text-center">
                    <v-icon size="48">mdi-account-multiple-check</v-icon>
                    <div class="text-h4 mt-2">{{ stats.attendeeCount }}</div>
                    <div class="text-body-2">参会记录</div>
                  </v-card-text>
                </v-card>
              </v-col>
            </v-row>
            <v-row class="mt-6">
              <v-col cols="12" md="4">
                <v-btn color="primary" block @click="exportReport">
                  <v-icon start>mdi-file-excel</v-icon>
                  导出报表
                </v-btn>
              </v-col>
              <v-col cols="12" md="4">
                <v-btn color="info" block @click="showKafka">
                  <v-icon start>mdi-server-network</v-icon>
                  Kafka可视化
                </v-btn>
              </v-col>
              <v-col cols="12" md="4">
                <v-btn color="success" block @click="showRedis">
                  <v-icon start>mdi-database</v-icon>
                  Redis可视化
                </v-btn>
              </v-col>
            </v-row>
          </v-card-text>
        </v-card>
      </v-col>
    </v-row>
    <v-snackbar v-model="showMessage" color="info">
      {{ message }}
      <template v-slot:actions>
        <v-btn color="white" text @click="showMessage = false">
          关闭
        </v-btn>
      </template>
    </v-snackbar>
    <!-- 预留更多管理功能 -->
  </v-container>
</template>

<script>
import api from '../services/api.js'
export default {
  name: 'AdminPage',
  data() {
    return {
      stats: {
        meetingCount: 0,
        userCount: 0,
        roomCount: 0,
        attendeeCount: 0
      },
      showMessage: false,
      message: ''
    }
  },
  mounted() {
    this.fetchStats()
  },
  methods: {
    async fetchStats() {
      try {
        const res = await api.getAdminStats()
        this.stats = res.data
      } catch (e) {
        this.showMsg('获取统计数据失败')
      }
    },
    async exportReport() {
      try {
        const res = await api.exportReport()
        const url = window.URL.createObjectURL(new Blob([res.data]))
        const link = document.createElement('a')
        link.href = url
        link.setAttribute('download', 'report.xlsx')
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
        this.showMsg('报表导出成功')
      } catch (e) {
        this.showMsg('报表导出失败')
      }
    },
    async showKafka() {
      try {
        const res = await api.getKafkaStatus()
        this.showMsg(res.data)
      } catch (e) {
        this.showMsg('Kafka状态获取失败')
      }
    },
    async showRedis() {
      try {
        const res = await api.getRedisStatus()
        this.showMsg(res.data)
      } catch (e) {
        this.showMsg('Redis状态获取失败')
      }
    },
    showMsg(msg) {
      this.message = msg
      this.showMessage = true
    }
  }
}
</script> 